<template>
    <div class="exam-page">
        <!-- 标题栏 -->
        <header class="header">
            <div class="header-left">
                <span>模拟考试</span>
            </div>
            <div class="header-middle">
                <!-- 倒计时卡片 -->
                <div class="timer" v-if="minutes!=undefined && minutes != '' && minutes !== null ">
                    <span class="timer-title">剩余时间</span>
                    <div class="timer-display" >
                        <span>{{ hours }}</span>:<span>{{ minutes }}</span>:<span>{{ seconds }}</span>
                    </div>
                </div>
            </div>
            <div class="header-right">
                <!-- 提交试卷按钮 -->
                <button class="submit-btn" @click="submitExam">提交试卷</button>
            </div>
        </header>
        <el-dialog
        fullscreen="true"
    v-model="dialogVisible"
    title="错误信息"
    :close-on-click-modal="false"
    :show-cancel-button="false"
    :show-confirm-button="true"
    confirm-button-text="确定"
    @confirm="handleConfirm"
    @close="handleClose"
  >
    <div v-html="errorMessage"></div>
    <div><el-button type="primary" @click="handleConfirm">确定</el-button></div>
  </el-dialog>
  <!--错误信息弹窗-->
  <el-progress 
      color="#ff4040" 
      :text-color="'#ff0000'" 
      :percentage="progressPercentage" 
      type="line"
       :stroke-width="20"
      />
      
        <!-- 主体内容 -->
        <div class="content">
            <!-- 左侧信息栏 -->
            <aside class="sidebar">
                <!-- 左侧信息卡片 -->
                <div class="sidebar-info card">
                    <!-- 考生信息卡片 -->
                    <div class="exam-info">
                        <p>考生姓名：<span>{{ studentInfo.name }}</span></p>
                        <p>学号：<span>{{ studentInfo.id }}</span></p>
                    </div>
                    <hr />
                    <!-- 进度信息卡片 -->
                     <div class="progress">
                         <!-- 使用 el-progress 组件显示进度 -->
                          <div class="progress-bar"> 
                            <el-progress :percentage="progressPercentage" color="#ff4040" ></el-progress>
                          </div>
                </div>
                    <hr />
                    <!-- 题型导航容器 -->
                    <div class="a1">
  
    <!-- 跳转题目按钮 -->
    <p v-if="singleChoice.size > 0">单选题</p>
    <div class="jump-buttons">
      <button 
  v-for="n in singleChoice.size" 
  :key="n" 
  class="jump-button"
  :class="{ 'answered': isAnswered(singleChoice.list[n-1].subject_id) }"
  @click="goToQuestion('singleChoice', n)"
>
  {{ n }}
</button>
    </div>

    <p v-if="multipleChoice.size > 0">多选题</p>
    <div class="jump-buttons">
      <button 
  v-for="n in multipleChoice.size" 
  :key="n" 
  class="jump-button"
  :class="{ 'answered': isAnswered(multipleChoice.list[n-1].subject_id) }"
  @click="goToQuestion('multipleChoice', n+singleChoice.size)"
>
  {{ n+singleChoice.size }}
</button>
    </div>

    <p v-if="trueFalse.size > 0">判断题</p>
    <div class="jump-buttons">
      <button 
  v-for="n in trueFalse.size" 
  :key="n" 
  class="jump-button"
  :class="{ 'answered': isAnswered(trueFalse.list[n-1].subject_id) }"
  @click="goToQuestion('trueFalse', n+singleChoice.size+multipleChoice.size)"
>
  {{ n+singleChoice.size+multipleChoice.size }}
</button>
    </div>
                    </div>
                </div>
            </aside>
             
            <!-- 试题展示区域 -->
            <main class="question-area card">
  <section v-if="singleChoice.size > 0">
    <el-card shadow="hover">
      <h2 v-if="singleChoice && singleChoice.name && singleChoice.size !== undefined && singleChoice.totalScore !== undefined">
        {{ singleChoice.name }} ( {{ singleChoice.size }} 题，合计{{ singleChoice.totalScore }} 分)
      </h2>
      <ul>
        <li v-for="(question, index) in singleChoice.list" :key="question.subject_id" :ref="setSingleChoiceRef">
          <p>{{ index + 1 }}. {{ question.subject_name }}
            <!-- 显示图片的工具提示 -->
            <el-tooltip effect="dark" v-if="question.subject_image">
              <template #content>
                <div v-html="generateImageHtml(question.subject_image)"></div>
              </template>
              <el-button>查看图片</el-button>
            </el-tooltip>
          </p>

          <el-radio-group v-model="selectedAnswers[question.subject_id]">
            <ul>
              <li v-if="question.option_a != null && question.option_a !== undefined && question.option_a !== '' ">
                <el-radio :label="'A'">{{ 'A. ' + question.option_a }}</el-radio>
              </li>
              <li v-if="question.option_b != null && question.option_b !== undefined && question.option_b !=='' ">
                <el-radio :label="'B'">{{ 'B. ' + question.option_b }}</el-radio>
              </li>
              <li v-if="question.option_c != null && question.option_c !== undefined && question.option_c !== '' ">
                <el-radio :label="'C'">{{ 'C. ' + question.option_c }}</el-radio>
              </li>
              <li v-if="question.option_d != null && question.option_d !== undefined && question.option_d !== '' ">
                <el-radio :label="'D'">{{ 'D. ' + question.option_d }}</el-radio>
              </li>
              <li v-if="question.option_e != null && question.option_e !== undefined && question.option_e !== ''">
                <el-radio :label="'E'">{{ 'E. ' + question.option_e }}</el-radio>
              </li>        
              <li v-if="question.option_f != null && question.option_f !== undefined && question.option_f !== ''">
                <el-radio :label="'F'">{{ 'F. ' + question.option_f }}</el-radio>
              </li>
            </ul>
          </el-radio-group>
        </li>
      </ul>
    </el-card>
  </section>

  <!-- 多选题 -->
  <section v-if="multipleChoice.size > 0">
    <el-card shadow="hover">
      <h2>{{ multipleChoice.name }} ( {{multipleChoice.size }} 题，{{ multipleChoice.totalScore }} 分)</h2>
      <ul>
        <li v-for="(question, index) in multipleChoice.list" :key="question.subject_id" :ref="setSingleChoiceRef">
          <p>{{ index + singleChoice.size + 1 }}. {{ question.subject_name }}
            <!-- 显示图片的工具提示 -->
            <el-tooltip effect="dark" v-if="question.subject_image">
              <template #content>
                <div v-html="generateImageHtml(question.subject_image)"></div>
              </template>
              <el-button>查看图片</el-button>
            </el-tooltip>
          </p>

          <el-checkbox-group v-model="selectedAnswers[question.subject_id]">
            <ul>
              <li v-if="question.option_a != null && question.option_a !== undefined && question.option_a !== '' ">
                <el-checkbox :label="'A'">{{ 'A. ' + question.option_a }}</el-checkbox>
              </li>
              <li v-if="question.option_b != null && question.option_b !== undefined && question.option_b !== ''">
                <el-checkbox :label="'B'">{{ 'B. ' + question.option_b }}</el-checkbox>
              </li>
              <li v-if="question.option_c != null && question.option_c !== undefined && question.option_c !== ''">
                <el-checkbox :label="'C'">{{ 'C. ' + question.option_c }}</el-checkbox>
              </li>
              <li v-if="question.option_d != null && question.option_d !== undefined && question.option_d !== ''">
                <el-checkbox :label="'D'">{{ 'D. ' + question.option_d }}</el-checkbox>
              </li>
              <li v-if="question.option_e != null && question.option_e !== undefined && question.option_e !== ''">
                <el-checkbox :label="'E'">{{ 'E. ' + question.option_e }}</el-checkbox>
              </li>
              <li v-if="question.option_f != null && question.option_f !== undefined && question.option_f !== ''">
                <el-checkbox :label="'F'">{{ 'F. ' + question.option_f }}</el-checkbox>
              </li>
            </ul>
          </el-checkbox-group>
        </li>
      </ul>
    </el-card>
  </section>

  <!-- 判断题 -->
  <section v-if="trueFalse.size > 0">
    <el-card shadow="hover">
      <h2>{{ trueFalse.name }} ({{ trueFalse.size }} 题，{{ trueFalse.totalScore }} 分)</h2>
      <ul>
        <li v-for="(question, index) in trueFalse.list" :key="question.subject_id" :ref="setSingleChoiceRef">
          <p>{{ index + 1 + singleChoice.size + multipleChoice.size }}. {{ question.subject_name }}
            <!-- 显示图片的工具提示 -->
            <el-tooltip effect="dark" v-if="question.subject_image">
              <template #content>
                <div v-html="gen00erateImageHtml(question.subject_image)"></div>
              </template>
              <el-button>查看图片</el-button>
            </el-tooltip>
          </p>

          <div class="options">
            <el-radio-group v-model="selectedAnswers[question.subject_id]">
              <ul>
                <li v-if="question.option_a">    
                  <el-radio :label="'A'">{{ 'A. ' + question.option_a }}</el-radio>
                </li>
                <li  v-if="question.option_b">
                  <el-radio :label="'B'">{{ 'B. ' + question.option_b }}</el-radio>
                </li>
              </ul>
            </el-radio-group>
          </div>
        </li>
      </ul>
    </el-card>
  </section>
            </main>
        </div>
    </div>
</template>
<script setup>       
import { ref, reactive, computed, onMounted, onUnmounted, nextTick,watch} from "vue";
import { getSimulatedExam,AddSimulatedExam } from "@/api/kaoshi/index2.js";
import { error } from "jquery";
import { ElMessage, ElMessageBox,ElNotification  } from "element-plus";
import { useUserInfoStore } from "@/store/user.js";
import router from "@/router";
import { useRoute } from 'vue-router';

const userInfoStore=useUserInfoStore();
const generateImageHtml = (imageUrl) => {
  return `<img src="${imageUrl}" alt="图片描述" style="height: auto; width: auto; max-width: 220px; max-height: 220px;"/>`;
};
// 定义题目数据
const singleChoice = ref({ size: 0, name: '', totalScore: 0, list: [] });
const multipleChoice = ref({ size: 0, name: '', totalScore: 0, list: [] });
const trueFalse = ref({ size: 0, name: '', totalScore: 0, list: [] });
const selectedAnswers = ref({}); // 存储每道题的选中答案
//个人信息
const studentInfo = ref({
name: userInfoStore.userInfo.nickName,
id: userInfoStore.userInfo.userId
})

const errorIds=ref([]);

const examSimu = ref({});
const dialogVisible = ref(false);
const errorMessage = ref('');

// 模拟考试信息
const params = ref({
  subjectMajor: null,
  subjectLv: 1,
  userid:userInfoStore.userInfo.userId
});
  // 将 selectedAnswers 对象转换为 JSON 字符串
  const answerContent = JSON.stringify(selectedAnswers.value);
// 获取路由实例
const route = useRoute();
const examTime=ref('');
// 定义响应式变量来存储查询参数
const subjectMajor = ref('');
const subjectLv = ref('');
//redis的key
const key=ref('');

const answeredQuestions = computed(() => {
  // 计算已答题的数量，即 selectedAnswers 中的键的数量
  return Object.keys(selectedAnswers.value).length;
});

const isAnswered = (subjectId) => {
  return selectedAnswers.value.hasOwnProperty(subjectId);
};

const totalQuestions = computed(() => {
  // 计算总题目数（单选题 + 多选题 + 判断题）
  return singleChoice.value.size + multipleChoice.value.size + trueFalse.value.size;
});

const progressPercentage = computed(() => {
  const answered = answeredQuestions.value;
  const total = totalQuestions.value;
  return total === 0 ? 0 : Math.floor((answered / total) * 100); // 计算答题进度百分比
});

const getSimulated = async  () =>{
  let result = await getSimulatedExam(params.value);
  //没有获取到的题就弹出
  if(result.data.multipleChoice.size+result.data.singleChoice.size+result.data.trueFalse.size==0){
    ElNotification({
      title: '提示',
      message: '对应类型或难度暂无考试题目',
      type: 'warning',
      duration: 2000
    });
    router.push('/exam/index2')
  }
examSimu.value = result.data;
singleChoice.value = result.data.singleChoice;
multipleChoice.value = result.data.multipleChoice;
trueFalse.value = result.data.trueFalse;
examTime.value=result.data.time;
key.value=result.data.key;
// 从本地缓存中恢复 selectedAnswers



const storedAnswers = localStorage.getItem(key.value);
  if (storedAnswers) {
    const data=JSON.parse(storedAnswers);
    const currentTime = Date.now();
    selectedAnswers.value = data.data;
    if (currentTime > data.expiry) {
      // 缓存已过期，清除本地缓存
      localStorage.removeItem(key.value);
      selectedAnswers.value = {};
    }
  }
startTimer();
}
// 调用此函数来展示错误提示框
const showErrorDialog = (errorSubjects) => {
  if (errorSubjects == null || errorSubjects.length === 0) {
    router.push('/exam/index2')
    return;
  }
  errorMessage.value = `${errorSubjects.join('<br><br>')}`;
  dialogVisible.value = true;
};

// 处理点击确认按钮的回调
const handleConfirm = () => {
  console.log('用户点击了确定');
  dialogVisible.value = false;
};
const handleClose=()=>{
  router.push('/exam/index2')
}
// 监听 selectedAnswers 的变化并存储到本地缓存
watch(selectedAnswers, (newVal) => {
  const dataWithExpiry = {
    data: newVal,
    expiry: Date.now() +(totalTime.value*1000), // 当前时间加上有效期
  };
  localStorage.setItem(key.value, JSON.stringify(dataWithExpiry));
}, { deep: true });
// 倒计时小时数
const hours = ref("");
// 倒计时分钟数
const minutes = ref("");
// 倒计时秒数
const seconds = ref("");
const totalTime = ref(0);
let timer;
// 开始倒计时
const startTimer = () => {
 totalTime.value = examTime.value; // 30 minutes in seconds
timer = setInterval(() => {
    if (totalTime.value <= 0) {
        clearInterval(timer);
        // 倒计时结束时自动提交试卷
        submitExam();
    } else {
      totalTime.value--;
        hours.value = String(Math.floor(totalTime.value / 3600)).padStart(2, "0");
        minutes.value = String(Math.floor((totalTime.value % 3600) / 60)).padStart(2, "0");
        seconds.value = String(totalTime.value % 60).padStart(2, "0");
    }
}, 1000);
};
// 定义当前问题信息
const currentQuestion = ref({
  type: '',
  index: null
});

const singleChoiceRefs = ref([]);

const setSingleChoiceRef = (el) => {
  if (el) {
    singleChoiceRefs.value.push(el);
  }
};

const goToQuestion = (type, questionNumber) => {
  currentQuestion.value.type = type;
  currentQuestion.value.index = questionNumber - 1;

  nextTick(() => {
    const refs = singleChoiceRefs.value;
    if (refs && refs.length > 0) {
      
      const element = refs[questionNumber - 1];
      if (element) {
        element.scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        });
      }
    }
  });
};
// 组件挂载后获取数据并开始倒计时
onMounted(() => {
  params.value.subjectMajor = route.query.subjectMajor || '';
  params.value.subjectLv = route.query.subjectLv || '';
  getSimulated();
});
onUnmounted(() => {
// 在组件卸载时，检查定时器是否存在
if (timer) {
    // 清除定时器以防止内存泄漏
    clearInterval(timer);
}
});
// 校验单选题
function validateSingleChoice(userAnswer, subject) {
  const correctAnswer = subject.subject_answer;
  const isCorrect = userAnswer === correctAnswer;
  return {
    isCorrect,
    userAnswer,
    correctAnswer,
    correctOptionContent: `${correctAnswer}. ${getOptionContent(subject, correctAnswer)}`
  };
}

// 校验多选题
function validateMultipleChoice(userAnswers, subject) {
  const correctAnswers = subject.subject_answer.split(','); // 假设答案格式为逗号分隔
  const userAnswersSorted = userAnswers.sort(); // 排序后进行无序比较
  const correctSorted = correctAnswers.sort();
  const isCorrect = userAnswersSorted.length === correctSorted.length && userAnswersSorted.every((val, index) => val === correctSorted[index]);
  const correctOptionContents = correctAnswers.map(optionId => `${optionId}. ${getOptionContent(subject, optionId.trim())}`).join(', ');
  return {
    isCorrect,
    userAnswers,
    correctAnswers,
    correctOptionContents
  };
}

// 校验判断题
function validateTrueFalse(userAnswer, subject) {
  const correctAnswer = subject.subject_answer;
  const isCorrect = userAnswer === correctAnswer;
  const correctOptionContent = correctAnswer === 'A' ? '正确' : '错误';
  return {
    isCorrect,
    userAnswer,
    correctAnswer,
    correctOptionContent: `${correctAnswer}. ${correctOptionContent}`
  };
}
// 根据选项ID获取选项内容
const getOptionContent = (subject, optionId) => {
  switch (optionId.toUpperCase()) {
    case 'A':
      return subject.option_a;
    case 'B':
      return subject.option_b;
    case 'C':
      return subject.option_c;
    case 'D':
      return subject.option_d;
    case 'E':
      return subject.option_e;
    case 'F':
      return subject.option_f;
    default:
      return '';
  }
};
const calculateTotalScore = () => {
  let totalScore = 0;

  // 单选题评分
  singleChoice.value.list.forEach((question) => {
    const userAnswer = selectedAnswers.value[question.subject_id];
    if (userAnswer && userAnswer === question.subject_answer) {
      totalScore +=2; 
    }
  });

  // 多选题评分
  multipleChoice.value.list.forEach((question) => {
    const userAnswers = selectedAnswers.value[question.subject_id];
    const correctAnswers = question.subject_answer.split(',').sort();
    if (userAnswers && userAnswers.sort().toString() === correctAnswers.toString()) {
      totalScore +=2; 
    }
  });

  // 判断题评分
  trueFalse.value.list.forEach((question) => {
    const userAnswer = selectedAnswers.value[question.subject_id];
    if (userAnswer && userAnswer === question.subject_answer) {
      totalScore +=2; 
    }
  });

  return totalScore;
};

// 提交试卷时计算总分
const submitExam = async () => {
  // 校验是否完成所有题目
  if (Object.keys(selectedAnswers.value).length !== singleChoice.value.size + multipleChoice.value.size + trueFalse.value.size) {
    ElMessage({
      type: 'error',
      message: `请完成所有题目`,
    });
    return;
  }

  // 错误记录
  let errorSubjects = [];


  // 校验单选题
  singleChoice.value.list.forEach((subject) => {
    const userAnswer = selectedAnswers.value[subject.subject_id];
    if (userAnswer) {
      const result = validateSingleChoice(userAnswer, subject);
      if (!result.isCorrect) {
        errorIds.value.push(subject.subject_id);
        errorSubjects.push(`单选题：${subject.subject_name}   <br>你的选择为：${result.userAnswer}   <br>正确答案为：${result.correctOptionContent}`);
      }
    }
  });

  // 校验多选题
  multipleChoice.value.list.forEach((subject) => {
    const userAnswers = selectedAnswers.value[subject.subject_id];
    if (userAnswers) {
      const result = validateMultipleChoice(userAnswers, subject);
      if (!result.isCorrect) {
        errorIds.value.push(subject.subject_id);
        errorSubjects.push(`多选题：${subject.subject_name}    <br>你的选择为：${result.userAnswers.join(', ')}    <br>正确答案为：${result.correctOptionContents}`);
      }
    }
  });

  // 校验判断题
  trueFalse.value.list.forEach((subject) => {
    const userAnswer = selectedAnswers.value[subject.subject_id];
    if (userAnswer) {
      const result = validateTrueFalse(userAnswer, subject);
      if (!result.isCorrect) {
        errorIds.value.push(subject.subject_id);
        errorSubjects.push(`判断题：${subject.subject_name}    <br>你的选择为：${result.userAnswer}    <br>正确答案为：${result.correctOptionContent}`);
      }
    }
  });

  // 计算总分
  const totalScore = calculateTotalScore();
  // 将 selectedAnswers 对象转换为 JSON 字符串
  const answerContent = JSON.stringify(selectedAnswers.value);
  const timeUsed = 1800-totalTime.value;
  // 提交试卷
  const SimulatedExam = await AddSimulatedExam({
    answerContent: answerContent,
    score: totalScore,
    userId: userInfoStore.userInfo.userId,
    timeUsed: timeUsed,
    key:key.value,
    errorMessage:`${errorSubjects.join('<br><br>')}`,
    errorIds:errorIds.value
  });
  if (SimulatedExam.code == 200) {
    ElMessage({
      type: 'success',
      message: `考试结束，你的分数为：${totalScore}`,
    });
     // 清除 selectedAnswers
     localStorage.removeItem(key.value);
  } else {
    ElMessage({
      type: 'error',
      message: `提交失败`,
    });
  }
  showErrorDialog(errorSubjects);
 
};
</script>

<style scoped>
/* 页面基础布局 */
.exam-page {
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 按列方向排列子元素 */
font-family: Arial, sans-serif; /* 设置字体 */
}

/* 标题栏 */
.header {
z-index: 99; /* 设置堆叠顺序 */
position: fixed; /* 固定标题栏 */
top: 60px; /* 距离顶部的距离 */
left: 0; /* 距离左侧的距离 */
width: 100%; /* 占满宽度 */
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 两端对齐 */
padding: 1vw 5vw; /* 内边距随视口宽度变化 */
background: linear-gradient(90deg, #e63946, #f76c6c); /* 红色渐变背景 */
color: white; /* 字体颜色 */
font-size: clamp(14px, 1.5vw, 24px); /* 动态字体大小 */
height: clamp(50px, 8vh, 100px); /* 动态标题栏高度 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
box-sizing: border-box; /* 包括内边距 */
}

.header-middle {
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
flex-grow: 1; /* 占据剩余空间 */
text-align: center; /* 文本居中 */
}

.timer {
color: #ffffff; /* 字体颜色 */
font-size: 18px; /* 字体大小 */
}

.timer-title {
font-weight: bold; /* 加粗字体 */
margin-right: 10px; /* 右侧外边距 */
}

.timer-display {
display: inline-block; /* 行内块级元素 */
font-size: 20px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
}

.content {
margin-top: clamp(60px, 10vh, 100px); /* 顶部间距动态调整 */
}

@media (max-width: 768px) {
.header {
    flex-direction: column; /* 小屏幕下标题栏可换行 */
    align-items: flex-start; /* 左侧对齐 */
    padding: 1vh 2vw; /* 调整内边距 */
}
}

.submit-btn {
background: #e63946; /* 红色背景 */
color: white; /* 字体颜色 */
border: none; /* 无边框 */
padding: 10px 20px; /* 内边距 */
border-radius: 8px; /* 圆角 */
cursor: pointer; /* 鼠标指针样式 */
transition: all 0.3s; /* 平滑过渡效果 */
}

.submit-btn:hover {
background: #d62839; /* 悬停时更深红色 */
}

/* 主体布局 */
.content {
display: flex; /* 使用 Flexbox 布局 */
}

/* 左侧信息栏 */
.sidebar {
position: fixed; /* 固定位置 */
top: 120px; /* 距离顶部的距离 */
left: 80px; /* 距离左侧的距离 */
width: 280px; /* 宽度 */
height: calc(100vh - clamp(60px, 10vh, 100px)); /* 动态高度 */
padding: 19px; /* 内边距 */
z-index: 80; /* 设置堆叠顺序 */
}

.content {
margin-left: 280px; /* 左侧外边距 */
flex: 1; /* 占据剩余空间 */
padding: 20px; /* 内边距 */
}

.card {
background: white; /* 背景色 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
border-radius: 8px; /* 圆角 */
padding: 16px; /* 内边距 */
margin-bottom: 15px; /* 底部外边距 */

}

/* 新的左侧信息卡片样式 */
.sidebar-info {
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 按列方向排列子元素 */
gap:7px; /* 项目之间的间距 */
}
.exam-info{
display: flex;
flex-direction: column;
height: 53px;
}
/* 下划线分隔线样式 */
.sidebar-info hr {
border: 0; /* 无边框 */
height: 1px; /* 高度 */
background: #ddd; /* 背景色 */
margin: 10px 0; /* 上下外边距 */
}

.type-navigation {
display: flex; /* 使用 Flexbox 布局 */
flex-wrap: wrap; /* 允许换行 */
gap: 5px; /* 项目之间的间距 */
}

.type-navigation button {
width: 30px; /* 宽度 */
height: 30px; /* 高度 */
background: #f0f0f0; /* 背景色 */
border: none; /* 无边框 */
border-radius: 4px; /* 圆角 */
cursor: pointer; /* 鼠标指针样式 */
transition: background-color 0.3s; /* 平滑过渡效果 */
}

.type-navigation button.active {
background: #ff4040; /* 激活状态背景色 */
color: white; /* 字体颜色 */
}

.type-navigation button:hover {
background: #c6e2ff; /* 悬停时背景色 */
}

/* 试题展示区 */
.h1 {
/* background-color: #333; */
display: flex; /* 使用 Flexbox 布局 */
align-items: start; /* 垂直居中对齐 */
justify-content: center;
width: 350px;
height: 36px;

}

.question-area {
counter-reset: question; /* 初始化计数器 */
flex: 1; /* 占据剩余空间 */
padding: 20px; /* 内边距 */
background-color: #ffffff; /* 背景色 */
border-radius: 8px; /* 圆角 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 阴影效果 */
margin-top: -25px; /* 设置负的 margin-top 值使其与左侧栏头部齐平 */
}

/* 单个题目容器样式 */
.question {
margin-bottom: 30px; /* 底部外边距 */
padding: 20px; /* 内边距 */
background-color: #ffffff; /* 背景色 */
border-radius: 8px; /* 圆角 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
border-left: 6px solid #f02121; /* 左边框 */
transition: transform 0.3s, box-shadow 0.3s; /* 平滑过渡效果 */
}

.question:hover {
transform: translateY(-2px); /* 鼠标悬停时上移 */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* 鼠标悬停时的阴影效果 */
}

/* 题目标题样式 */
.question-title {
font-weight: bold; /* 加粗字体 */
font-size: 18px; /* 字体大小 */
color: #333333; /* 文字颜色 */
margin-bottom: 15px; /* 底部外边距 */
line-height: 1.5; /* 行高 */
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中对齐 */
gap: 10px; /* 项目之间的间距 */
}

/* 标题前的数字高亮 */
.question-title::before {
content: counter(question); /* 显示计数器值 */
counter-increment: question; /* 计数器递增 */
display: inline-block; /* 行内块级元素 */
background-color: #ff2e2e; /* 背景色 */
color: white; /* 文字颜色 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
width: 30px; /* 宽度 */
height: 30px; /* 高度 */
text-align: center; /* 文字水平居中 */
line-height: 30px; /* 文字垂直居中 */
border-radius: 50%; /* 圆形 */
}

/* 选项容器 */
.question-options {
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 按列方向排列子元素 */
gap: 15px; /* 项目之间的间距 */
margin-top: 10px; /* 顶部外边距 */
}

/* 单选框和多选框的外层样式 */
.question-options .el-radio,
.question-options .el-checkbox {
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中对齐 */
padding: 12px 13px; /* 内边距 */
border-radius: 8px; /* 圆角 */
background-color: #ffffff; /* 背景色 */
transition: all 0.3s ease; /* 平滑过渡效果 */
font-size: 16px; /* 字体大小 */
color: #333; /* 文字颜色 */
cursor: pointer; /* 鼠标指针样式 */
gap: 10px; /* 项目之间的间距 */
width: 110px; /* 宽度 */
box-sizing: border-box; /* 盒模型 */
}
/* 鼠标悬停时的样式 */
.question-options .el-radio:hover,
.question-options .el-checkbox:hover {
border-color: #e32d2d; /* 边框颜色 */
background-color: #f0f9ff; /* 背景色 */
}

/* 被禁用状态样式 */
.question-options .el-radio.is-disabled,
.question-options .el-checkbox.is-disabled {
border-color: #e4e4e4; /* 边框颜色 */
background-color: #f5f5f5; /* 背景色 */
color: #bcbcbc; /* 文字颜色 */
cursor: not-allowed; /* 鼠标指针样式 */
}

/* 图标样式（包括选中与未选中状态） */
.question-options .el-radio .el-radio__input,
.question-options .el-checkbox .el-checkbox__input {
display: flex; /* 使用 Flexbox 布局 */
justify-content: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
width: 20px; /* 宽度 */
height: 20px; /* 高度 */
border-radius: 50%; /* 圆形 */
border: 2px solid #dcdcdc; /* 边框 */
background-color: #ff4b4b; /* 背景色 */
transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 单选框选中时的图标 */
.question-options .el-radio.is-checked .el-radio__input {
border-color: #f33737; /* 边框颜色 */
background-color: #ee2424; /* 背景色 */
}

/* 多选框选中时的图标 */
.question-options .el-checkbox.is-checked .el-checkbox__input {
border-color: #f12020; /* 边框颜色 */
background-color: #f73131; /* 背景色 */
}

/* 图标中的勾号 */
.question-options .el-checkbox.is-checked .el-checkbox__input::after {
content: "✔"; /* 勾号符号 */
font-size: 12px; /* 字体大小 */
color: white; /* 文字颜色 */
text-align: center; /* 文字水平居中 */
}

/* 单选框和多选框的文本样式 */
.question-options .el-radio__label,
.question-options .el-checkbox__label {
font-size: 16px; /* 字体大小 */
color: #333; /* 文字颜色 */
flex-grow: 1; /* 占据剩余空间 */
padding-left: 10px; /* 左边内边距 */
}

/* 增加选项之间的间距 */
.question-options {
gap: 12px; /* 项目之间的间距 */
}
.progress{

height: 30px;
align-content: center;
display: flex;
flex-direction: column;
justify-content: center;
}
/* 进度条 */
.progress-info .el-progress {
height:20px;
margin-bottom: 10px; /* 底部外边距 */
}

/* 答题卡整体样式 */
.question-types {

display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 按列方向排列子元素 */
}

.type-title {

height: 17px; /* 高度 */
padding: 1px; /* 内边距 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
color: #333; /* 文字颜色 */
margin-bottom: 10px; /* 底部外边距 */
}
.a1{
top: -5px;
position: relative;
}
/* 题号按钮 */
.question-types-container .question-navigation {

display: flex; /* 使用 Flexbox 布局 */
flex-wrap: wrap; /* 允许换行 */
gap: 7.8px; /* 项目之间的间距 */
align-items: center; /* 垂直居中对齐 */

}
.question-types-container .question-navigation > * {
flex: 0 0 calc((100% - 8px * 4) / 5); /* 每行 5 个 */
max-width: calc((100% - 8px * 4) / 5); /* 避免超出 */
}

.question-btn {
width: 35px; /* 宽度 */
height: 35px; /* 高度 */
border-radius: 50%; /* 圆形 */
border: 1px solid #dcdcdc; /* 边框 */
background-color: #f0f0f0; /* 背景色 */
color: #333; /* 文字颜色 */
font-size: 14px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
text-align: center; /* 文字水平居中 */
line-height: 35px; /* 文字垂直居中 */
cursor: pointer; /* 鼠标指针样式 */
transition: all 0.3s; /* 平滑过渡效果 */
}

.question-btn:hover {
color: white; /* 文字颜色 */
}
.jump-button.answered {
  background-color: #ff1b1b; /* 已回答状态的背景色 */
border-color: #c23a3a; /* 边框颜色 */
color: white; /* 文字颜色 */
}
.jump-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 添加间距 */
}

.jump-button {
  background-color: #ddd;
  color: black;
  border: none;
  border-radius: 50%; /* 圆形按钮 */
  width: 25px; /* 固定按钮的宽度 */
  height: 25px; /* 固定按钮的高度 */
  padding: 0; /* 去掉内边距，确保按钮大小固定 */
  font-size: 12px; /* 设置字体大小 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}
ul {
list-style-type: none;
}
</style>